<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <input type="text" placeholder="说啥" v-model="weibo.content">
 <!-- action设置上传地址
  name 设置上传参数名称
  limit 设置上传图片的数量-->
  <el-upload
          action="/upload"
          name="pic"
          limit="1"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
    <br>
    <input type="button" value="发表" @click="insert()">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,

          weibo:{
            content:"",
              url:""
          }
      }
    },
    methods:{
      handleRemove(file, fileList) {
        //当删除页面中图片时触发的方法
        //发请求删除服务器中的图片
        //file代表当前要删除的图片文件
        //
        axios.get("/remove?url="+file.response).then(function () {
          console.log(file, fileList);
        })

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
        handleSuccess(response,file,fileList){
          //response服务器上传成功时响应的数据
         //file代表当前上传成功的文件
        //fileList代表上传成功后的所有文件（是一个数组）
            v.weibo.url=response
        },
        insert(){
          if(v.weibo.url==""){
              alert("请选择上传的图片");
              return;
          }
          axios.post("/weibo/insert",v.weibo).then(function (response) {
            if(response.data==2){
              alert("请登录")
              location.href="/"
            }else {
              alert("发送完成");
              location.href="/";
            }
          })
        }
    }
  })
</script>
</html>